```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息记忆分析可视化</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .highlight-box {
            border-left: 4px solid #6e8efb;
            background-color: rgba(110, 142, 251, 0.05);
        }
        .first-letter:first-letter {
            font-size: 3em;
            float: left;
            line-height: 0.8em;
            margin-right: 0.1em;
            color: #6e8efb;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col items-center text-center">
                <h1 class="serif text-5xl font-bold mb-6">信息记忆分析可视化</h1>
                <p class="text-xl max-w-2xl leading-relaxed mb-8">探索用户偏好的智能识别与可视化呈现</p>
                <div class="w-24 h-1 bg-white opacity-30 mb-10"></div>
                <p class="text-lg max-w-3xl leading-relaxed opacity-90">通过先进的数据可视化技术，将复杂的用户偏好信息转化为直观、美观的视觉呈现</p>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-5xl px-4 py-16">
        <!-- Criteria Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <i class="fas fa-list-check text-2xl text-purple-600 mr-4"></i>
                <h2 class="serif text-3xl font-bold">记忆标准分析</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- Positive Criteria -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4">
                                <i class="fas fa-check-circle text-green-600"></i>
                            </div>
                            <h3 class="text-xl font-bold">应记忆的标准</h3>
                        </div>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>用户明确的工作流程偏好</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>特定的技术选择与配置</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>反复出现的请求模式</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>用户明确要求记忆的内容</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>强烈的个人偏好与观点</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Negative Criteria -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-4">
                                <i class="fas fa-times-circle text-red-600"></i>
                            </div>
                            <h3 class="text-xl font-bold">不应记忆的标准</h3>
                        </div>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                                <span>一次性任务的具体细节</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                                <span>不会被复用的实现细节</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                                <span>临时的上下文信息</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                                <span>模糊或不明确的偏好</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-times text-red-500 mt-1 mr-2"></i>
                                <span>基本的软件工程原则</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visualization Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <i class="fas fa-project-diagram text-2xl text-blue-600 mr-4"></i>
                <h2 class="serif text-3xl font-bold">记忆决策流程图</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover">
                <div class="mermaid">
                    graph TD
                        A[新信息] --> B{是否明确用户偏好?}
                        B -->|是| C{是否具体且可操作?}
                        B -->|否| D[丢弃]
                        C -->|是| E{是否会被复用?}
                        C -->|否| D
                        E -->|是| F[记忆]
                        E -->|否| D
                </div>
            </div>
        </section>

        <!-- Examples Section -->
        <section>
            <div class="flex items-center mb-8">
                <i class="fas fa-lightbulb text-2xl text-yellow-600 mr-4"></i>
                <h2 class="serif text-3xl font-bold">示例分析</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <!-- Good Example -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                <i class="fas fa-thumbs-up text-green-600"></i>
                            </div>
                            <h3 class="text-lg font-bold">良好的记忆示例</h3>
                        </div>
                        <div class="space-y-4">
                            <div class="highlight-box p-4 rounded">
                                <p class="font-medium">function-size-preference</p>
                                <p class="text-sm text-gray-600">保持函数不超过50行以提高可读性</p>
                            </div>
                            <div class="highlight-box p-4 rounded">
                                <p class="font-medium">prefer-async-await</p>
                                <p class="text-sm text-gray-600">使用async/await风格而非Promise链</p>
                            </div>
                            <div class="highlight-box p-4 rounded">
                                <p class="font-medium">test-driven-development</p>
                                <p class="text-sm text-gray-600">在实现新功能前先编写测试</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bad Example -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3">
                                <i class="fas fa-thumbs-down text-red-600"></i>
                            </div>
                            <h3 class="text-lg font-bold">不良的记忆示例</h3>
                        </div>
                        <div class="space-y-4">
                            <div class="bg-red-50 p-4 rounded border-l-4 border-red-400">
                                <p class="font-medium">refactor-target</p>
                                <p class="text-sm text-gray-600">utils.ts中的calculateTotal函数需要重构</p>
                            </div>
                            <div class="bg-red-50 p-4 rounded border-l-4 border-red-400">
                                <p class="font-medium">variable-name-choice</p>
                                <p class="text-sm text-gray-600">在此特定函数中对API调用结果使用'userData'</p>
                            </div>
                            <div class="bg-red-50 p-4 rounded border-l-4 border-red-400">
                                <p class="font-medium">css-class-fix</p>
                                <p class="text-sm text-gray-600">需要在此视图的'.card-title'元素中添加'margin-top: 10px'</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detailed Explanation -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden p-8 card-hover">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                    <span>记忆决策的关键要素</span>
                </h3>
                <div class="grid md:grid-cols-3 gap-6">
                    <div>
                        <div class="flex items-center mb-2">
                            <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                <i class="fas fa-bullseye text-blue-600 text-xs"></i>
                            </div>
                            <h4 class="font-medium">具体性</h4>
                        </div>
                        <p class="text-sm text-gray-600">记忆应该是具体且可操作的，而不是模糊或通用的指导原则。</p>
                    </div>
                    <div>
                        <div class="flex items-center mb-2">
                            <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                <i class="fas fa-redo text-blue-600 text-xs"></i>
                            </div>
                            <h4 class="font-medium">复用性</h4>
                        </div>
                        <p class="text-sm text-gray-600">记忆应该在未来的对话中有可能被复用，而不是一次性使用的信息。</p>
                    </div>
                    <div>
                        <div class="flex items-center mb-2">
                            <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                <i class="fas fa-user text-blue-600 text-xs"></i>
                            </div>
                            <h4 class="font-medium">用户导向</h4>
                        </div>
                        <p class="text-sm text-gray-600">记忆应该反映用户明确的偏好和需求，而不是来自助手的假设或建议。</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```